<template>
  <div class="panel">
    <div class="chart-container" ref="chartRef"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'

const chartRef = ref<HTMLElement | null>(null)
let chart: echarts.ECharts | null = null

const colors = ['#00C1DE', '#3B7CFF', '#00B390', '#33FFD0', '#7A04EB']

const option = {
  color: colors,
  grid: {
    left: '3%',
    right: '4%',
    bottom: '15%',
    top: '3%',
    containLabel: true
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
    backgroundColor: 'rgba(0, 0, 0, 0.8)',
    borderColor: 'rgba(51, 255, 208, 0.2)',
    borderWidth: 1,
    textStyle: {
      color: '#fff',
      fontSize: 14
    }
  },
  legend: {
    bottom: '0%',
    itemWidth: 15,
    itemHeight: 15,
    itemGap: 24,
    textStyle: {
      color: 'rgba(255, 255, 255, 0.9)',
      fontSize: 14,
      textShadow: '0 0 3px rgba(0, 0, 0, 0.3)'
    },
    data: ['灌溉系统', '气象站', '土壤传感器', '温室控制器', '摄像头']
  },
  xAxis: {
    type: 'value',
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: 'rgba(51, 255, 208, 0.1)',
        type: 'dashed'
      }
    },
    axisLabel: {
      color: 'rgba(255, 255, 255, 0.8)',
      fontSize: 13,
      formatter: (value: number) => {
        return value.toString().padStart(3, ' ')
      }
    }
  },
  yAxis: {
    type: 'category',
    data: ['区域1', '区域2', '区域3', '区域4', '区域5'],
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      color: 'rgba(255, 255, 255, 0.9)',
      fontSize: 14,
      margin: 20,
      fontWeight: 'bold'
    }
  },
  series: [
    {
      name: '灌溉系统',
      type: 'bar',
      stack: 'total',
      barWidth: '60%',
      label: {
        show: true,
        position: 'inside',
        color: '#fff',
        fontSize: 14,
        fontWeight: 'bold',
        textShadow: '0 0 3px rgba(0, 0, 0, 0.5)'
      },
      itemStyle: {
        borderRadius: [0, 0, 0, 0]
      },
      data: [47, 10, 24, 73, 68]
    },
    {
      name: '气象站',
      type: 'bar',
      stack: 'total',
      label: {
        show: true,
        position: 'inside',
        color: '#fff',
        fontSize: 14,
        fontWeight: 'bold',
        textShadow: '0 0 3px rgba(0, 0, 0, 0.5)'
      },
      itemStyle: {
        borderRadius: [0, 0, 0, 0]
      },
      data: [85, 90, 59, 100, 96]
    },
    {
      name: '土壤传感器',
      type: 'bar',
      stack: 'total',
      label: {
        show: true,
        position: 'inside',
        color: '#fff',
        fontSize: 14,
        fontWeight: 'bold',
        textShadow: '0 0 3px rgba(0, 0, 0, 0.5)'
      },
      itemStyle: {
        borderRadius: [0, 0, 0, 0]
      },
      data: [89, 14, 91, 1, 0]
    },
    {
      name: '温室控制器',
      type: 'bar',
      stack: 'total',
      label: {
        show: true,
        position: 'inside',
        color: '#fff',
        fontSize: 14,
        fontWeight: 'bold',
        textShadow: '0 0 3px rgba(0, 0, 0, 0.5)'
      },
      itemStyle: {
        borderRadius: [0, 0, 0, 0]
      },
      data: [99, 81, 74, 56, 81]
    },
    {
      name: '摄像头',
      type: 'bar',
      stack: 'total',
      label: {
        show: true,
        position: 'inside',
        color: '#fff',
        fontSize: 14,
        fontWeight: 'bold',
        textShadow: '0 0 3px rgba(0, 0, 0, 0.5)',
        formatter: function(params: any) {
          return params.value > 0 ? params.value : '';
        }
      },
      itemStyle: {
        borderRadius: [0, 4, 4, 0]
      },
      data: [3, 0, 0, 0, 0]
    }
  ]
}

onMounted(() => {
  if (chartRef.value) {
    chart = echarts.init(chartRef.value)
    chart.setOption(option)
    
    window.addEventListener('resize', handleResize)
  }
})

onUnmounted(() => {
  if (chart) {
    chart.dispose()
  }
  window.removeEventListener('resize', handleResize)
})

const handleResize = () => {
  chart?.resize()
}
</script>

<style scoped>
.panel {
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  backdrop-filter: blur(10px);
}

.chart-container {
  flex: 1;
  width: 100%;
  padding: 10px;
}
</style> 